 
var stage2 = new createjs.Stage( "canvas-intro" );
var stage = new createjs.Stage( "canvas-main" );
var stage3 = new createjs.Stage( "canvas-outcome" );

var score;
var scoreText;
var manText;
var attempts;
var attemptText;
var levelText;
var NUMBER_OF_SNOW_LINES = 3;

var initialPositionX = 10;
var initialPositionY = 520;
var initialVelocityX;
var initialVelocityY;

//width and height for the cloudnaut shape
var width = 77;
var height = 90;
//width and height for the manllites shape
var width2 = 87;
var height2 = 65;

var loadingBar;
var progressValue = 0;
var progressText;

var queue;
var manifest = [ { id: "cloud", src: "images/icon.png" },
                 { id: "small", src: "images/sn.png" },
                 { id: "background", src: "images/s.jpg" },
                 { id: "man", src: "images/n.png" } ];

var LOADING_BAR_WIDTH = 600;
var LOADING_BAR_HEIGHT = 40;

var timestep = 0;
var delta = .3;

var manContainers = new Array();
var mansImage;
var mansContainer;
var numberOfBuckets;

var background = new Image();
background.src = "images/s.jpg";
var backgroundContainer;

var cloud = new Image();
cloud.src = "images/icon.png";
var cloudImage;
var cloudContainer;

var small = new Image();
small.src = "images/sn.png";
var smallContainer;

var game = new Game();
game.resetGame();
game.setLevel( 1 );
game.setGameLevel();

//initialize the manllites based on level
function initmanContainers()
{
	//drawing the manllites
	numberOfBuckets = game.getNumberOfBuckets();
	var startingX = 450;
	//distances between lines
	var intervalX = Math.floor( (stage.canvas.width - startingX ) / NUMBER_OF_SNOW_LINES - 75 );
	
	for( i = 0; i < numberOfBuckets; i = i + 1 )
		{
			//draw the manllites
			var mans = new Image();
			mans.src = "images/n.png";
			mansImage = new createjs.Bitmap( mans );
			mansContainer = new createjs.Container();
			mansContainer.x = startingX + intervalX * i - 50 + 7.5;
			mansContainer.y = game.getmanHeights()[ i ];
			
			var mansShape = new createjs.Shape();
			mansShape.graphics.setStrokeStyle( "1" );
			mansShape.graphics.drawRect( 0, 0, width2, height2 );
			
			mansContainer.addChild( mansImage, mansShape );

			manContainers.push( mansContainer );
		}	
}

function loadingScreen()
{
	document.getElementById( "velocity" ).style.display = "none";
	document.getElementById( "loading" ).play();
	backgroundContainer = new createjs.Bitmap( background );
	backgroundContainer.x = 0;
	backgroundContainer.y = 0;
	
	stage2.addChild( backgroundContainer );
	
	var text = new createjs.Text( "Welcome to the Christmas Game", " 30px Georgia", "orange" );
	text.shadow = new createjs.Shadow( "black", 5, 5, 5);
	text.textAlign = "center";
	text.x = 400;
	text.y = 80;
	
	stage2.addChild( text );
	
	var rules = new createjs.Text( "(Play Hitting the Snowman)\n " + 

			"Type the appropriate number in X and Y coordinates and press the Launch Button. \n"  +
			"Notice: type ( - ) before the number you decided in Y.\n" +

			"Hitting all the snowman then you will move two the next level.\n" +

			"\n You will win when levels are complete.\n"  
			+ "if you run out of all the attempts then it will be Game Over\n" , 

			"20px Georgia", "yellow" );
	rules.shadow = new createjs.Shadow( "black", 5, 5, 5);
	rules.textAlign = "center";
	rules.x = 400;
	rules.y = 150;
	
	stage2.addChild( rules );
	
	
	var containerPlayButton = new createjs.Container();
	
	var playButton = new createjs.Shape();
	playButton.graphics.setStrokeStyle( "3" );
	playButton.graphics.beginStroke( "black" );
	playButton.graphics.beginFill( "white" );
	playButton.graphics.drawRoundRect( 0, 0, 200, 50, 20 );
	
	var playText = new createjs.Text( "Start the Game", "20px Georgia", "black" );
	playText.textAlign = "center";
	playText.x = 200 / 2;
	playText.y = 50 / 3.5;
	
	containerPlayButton.x = 300;
	containerPlayButton.y = 530;
	
	containerPlayButton.addChild( playButton, playText );
	containerPlayButton.addEventListener( "click", playButtonClick );
	
	stage2.addChild( containerPlayButton );
	
	
	progressText = new createjs.Text( progressValue + "%", "30px Georgia", "white" );
	progressText.shadow = new createjs.Shadow( "black", 5, 5, 5);
	progressText.textAlign = "center";
	progressText.x = 875;
	progressText.y = 480;
	
	stage2.addChild( progressText );
	
	//draws the loading bar  
	var bar = new createjs.Shape();
	bar.graphics.setStrokeStyle( "3" );
	bar.graphics.beginStroke( "black" );
	bar.graphics.drawRect( 0, 0, LOADING_BAR_WIDTH, LOADING_BAR_HEIGHT );
	
	var barContainer = new createjs.Container();
	barContainer.addChild( bar );
	barContainer.x = stage2.canvas.width / 2 - LOADING_BAR_WIDTH / 2;
	barContainer.y = 475;
		
	stage2.addChild( barContainer );
	
	//draws the loading bar color after the preload is finished
	loadingBar = new createjs.Shape();
	loadingBar.graphics.beginFill( "orange" );
	loadingBar.graphics.drawRect( stage2.canvas.width / 2 - LOADING_BAR_WIDTH / 2, 475, 0, LOADING_BAR_HEIGHT );
	stage2.addChild( loadingBar );
	
	stage2.update();
}

function preload()
{
	loadingScreen();
	stage.update();
	
	queue = new createjs.LoadQueue( false );
	
	queue.addEventListener( "fileload", handleFileLoad );
	
	
	queue.loadManifest( manifest );
	
	queue.load();
}

function handleFileLoad( evt )
{
	var totalProgress = manifest.length;
	
	progressValue = progressValue + 1;
	
	var percentage = Math.ceil( ( progressValue / totalProgress * 100 ) );
	progressText.text = percentage + "% Loaded";
	
	loadingBar.graphics.beginFill( "orange" );
	loadingBar.graphics.drawRect( stage2.canvas.width / 2 - LOADING_BAR_WIDTH / 2, 475, percentage / 100 * LOADING_BAR_WIDTH, LOADING_BAR_HEIGHT );
	stage2.update();
}

function playButtonClick( evt )
{
	document.getElementById( "canvas-main" ).style.display = "inline";
	document.getElementById( "canvas-intro" ).style.display = "none";
	init();
}

function init()
{
	stage.removeAllChildren();
	stage.update();
	
	initmanContainers();
	drawBackground();
	drawGameBuckets();
	drawSnowAndmans();
	stage.addChild( smallContainer, cloudContainer );
	stage.update();
}
//adds the cloud image to the main-canvas
cloud.onload = function( evt )
{
	cloudImage = new createjs.Bitmap( cloud );
	cloudImage.shadow = new createjs.Shadow( "black", 5, 5, 5 );
	cloudContainer = new createjs.Container();
	cloudContainer.x = initialPositionX;
	cloudContainer.y = initialPositionY;
	
	var cloudShape = new createjs.Shape();
	cloudShape.graphics.setStrokeStyle( "3" );
	cloudShape.graphics.drawRect( 5, 5, width, height );
	
	cloudContainer.addChild( cloudImage, cloudShape );
	stage.addChild( cloudContainer );
	stage.update();
}
//adds the foreground image of a small
small.onload = function( evt )
{
	smallContainer = new createjs.Bitmap( small );
	smallContainer.shadow = new createjs.Shadow( "black", -5, -5, 5 );
	smallContainer.x = 900;
	smallContainer.y = 800;
	smallContainer.regX = 300;
	smallContainer.regY = 300;
	stage.addChild( smallContainer );
	stage.update();
}
//draws the background image first
function drawBackground()
{
	backgroundContainer = new createjs.Bitmap( background );
	backgroundContainer.x = 0;
	backgroundContainer.y = 0;
	
	stage.addChild( backgroundContainer );
}
//function to write the game level, attempts, and score.
function drawGameBuckets()
{
	scoreText = new createjs.Text( "Score:" + game.getScore(), "20px Georgia", "white" );
	scoreText.textAlign = "left";
	
	var scoreContainer = new createjs.Container();
	scoreContainer.x = 50;
	scoreContainer.y = 50;
	scoreContainer.addChild( scoreText );

	manText = new createjs.Text( "Snowman Remaining: " + game.getNumberOfBuckets(), "20px Georgia", "white" );
	manText.textAlign = "left";
	
	var manTextContainer = new createjs.Container();
	manTextContainer.x = 160;
	manTextContainer.y = 50;
	manTextContainer.addChild( manText );

	levelText = new createjs.Text( "Level: " + game.getLevel(), "20px Georgia", "white" );
	levelText.textAlign = "left";
	
	var levelContainer = new createjs.Container();
	levelContainer.x = 50;
	levelContainer.y = 70;
	levelContainer.addChild( levelText );
	
	attemptText = new createjs.Text( "Attempts: " + game.getAttempts(), "20px Georgia", "white" );
	attemptText.textAlign = "left";
	
	var attemptContainer = new createjs.Container();
	attemptContainer.x = 130;
	attemptContainer.y = 70;
	attemptContainer.addChild( attemptText );
	
	var formBox = new createjs.DOMElement( "velocity" );
	document.getElementById( "velocity" ).style.display = "inline";
	formBox.x = 50;
	formBox.y = 110;
	
	stage.addChild( scoreContainer, levelContainer, attemptContainer, formBox );
}

function drawSnowAndmans()
{
	numberOfBuckets = game.getNumberOfBuckets();
	var startingX = 450;
	
	var intervalX = Math.floor( (stage.canvas.width - startingX ) / NUMBER_OF_SNOW_LINES - 75 );
	
	for( i = 0; i < numberOfBuckets; i = i + 1 )
		{
			if( game.getmanHeights()[ i ] != -1 )
				{
					//Draw the lines
					var snow = new createjs.Shape();
					snow.shadow = new createjs.Shadow( "black", 5, 5, 5 );
					snow.graphics.beginLinearGradientFill( [ "black", "#87CEFF", "black" ], [ 0, .5, 1 ], startingX + intervalX * i, 0, startingX + intervalX * i + 15, 0 );
					snow.graphics.drawRect( startingX + intervalX * i, 0, 15, stage.canvas.height );
					
					stage.addChild( snow );
					
					//Draw the manllites
					var mans = new Image();
					mans.src = "images/n.png";
					mansImage = new createjs.Bitmap( mans );
					mansImage.shadow = new createjs.Shadow( "black", 5, 5, 5 );
					mansContainer = new createjs.Container();
					mansContainer.x = startingX + intervalX * i - 50 + 7.5;
					mansContainer.y = game.getmanHeights()[ i ];
					
					var mansShape = new createjs.Shape();
					mansShape.graphics.setStrokeStyle( "1" );
					mansShape.graphics.drawRect( 5, 5, width2, height2 );
					
					mansContainer.addChild( mansImage, mansShape );
					
					stage.addChild( mansContainer );
				}
		}
	stage.update();
}
//function to redraw the canvas
function redraw()
{
	stage.removeAllChildren();
	stage.update();
	drawBackground();
	drawGameBuckets();
	drawSnowAndmans();
	stage.addChild( smallContainer, cloudContainer );
	stage.update();
}

createjs.Ticker.setFPS( 24 );
function tick()
{
	initialVelocityX = document.getElementById( "valueX" ).value;
	initialVelocityY = document.getElementById( "valueY" ).value;
	
	cloudContainer.x = initialPositionX + initialVelocityX * timestep;
	cloudContainer.y = initialPositionY + initialVelocityY * timestep + .5 * 9.81 * timestep * timestep;
	
	timestep = timestep + delta;
	
	smallContainer.rotation += 2;
	
	//check collision here//
	if( isIntersect() )
		{
			var score = game.getScore();
			game.setScore( score + man_POINTS );
			scoreText.text = "Score:" + game.getScore();
		}

	redraw();
		
	if( cloudContainer.y > stage.canvas.height || cloudContainer.x > stage.canvas.width )
		{
			createjs.Ticker.removeListener( this );
			document.getElementById( "miss" ).play();
			cloudContainer.x = initialPositionX;
			cloudContainer.y = initialPositionY;
			timestep = 0;
		}
	stage.update();
}
//function the intersection between the cloudnaut and manllites.
//some of the code from http://rhuno.com/flashblog/2012/01/15/tutorial-html-5-space-shooter-part-3/#more-534.
var manNumber;
var currentman;
function isIntersect()
{
	manNumber = manContainers.length - 1;
		
	for( var i = manNumber; i >= 0; i = i - 1 )
		{
			currentman = manContainers[ i ];
			if( cloudContainer.x < manContainers[ i ].x + width2 &&
					cloudContainer.x + width > manContainers[ i ].x &&
					cloudContainer.y < manContainers[ i ].y + height2 &&
					cloudContainer.y + height > manContainers[ i ].y )
				{
					stage.removeChild( currentman );
					manContainers.splice( i, 1 );
					document.getElementById( "hit" ).play();
					console.log( game.getNumberOfBuckets() + "," + manNumber );
					 
					stage.update();
					
					var levelNumber = game.getLevel();
					if( manNumber == 0 )
						{
							game.setLevel( levelNumber + 1);
							game.setGameLevel();
							game.checkGameStatus();
							stage.removeAllChildren();
							stage.update();
							initmanContainers();
							drawSnowAndmans();
							createjs.Ticker.removeListener( this );
							cloudContainer.x = initialPositionX;
							cloudContainer.y = initialPositionY;
							timestep = 0;
						}
					return true;
				}
			manNumber = manContainers.length - 1;
		}	
	return false;
}
//function the animation and the attempts
function launch()
{
	 
	document.getElementById( "launch" ).play();
	var numberOfAttempts = game.getAttempts();
	if( numberOfAttempts > 0 )
		{
			game.setAttempts( numberOfAttempts - 1 );
			attemptText.text = "Attempts:" + game.getAttempts();
			createjs.Ticker.addListener( this );
		}
	else
		{
			createjs.Ticker.removeListener( this );
			game.checkGameStatus();
		}
	stage.update();
}
//code for the third canvas
function drawLoserCanvas()
{
	stage3.removeAllChildren();
	stage3.update();
	document.getElementById( "gameover" ).play();
	document.getElementById( "velocity" ).style.display = "none";
	document.getElementById( "canvas-outcome" ).style.display = "inline";
	document.getElementById( "canvas-main" ).style.display = "none";
		
	backgroundContainer;
	
	var outcomeLText = new createjs.Text( "Sorry!!\nYou Could not pass!\n\n", "30px Georgia", "yellow" );
	outcomeLText.text += "Game Over!!";
	outcomeLText.textAlign = "center";
	outcomeLText.x = 400;
	outcomeLText.y = 200;
	
	stage3.addChild( backgroundContainer, outcomeLText );
	stage3.update();	
}

function drawWinnerCanvas()
{
	stage3.removeAllChildren();
	stage3.update();
	document.getElementById( "winner" ).play();
	document.getElementById( "velocity" ).style.display = "none";
	document.getElementById( "canvas-outcome" ).style.display = "inline";
	document.getElementById( "canvas-main" ).style.display = "none";
		
	backgroundContainer;
	
	var outcomeWText = new createjs.Text( "Congratulation(: \nYou Won!\n\n", "30px Georgia", "yellow" );
	outcomeWText.text += "Winner!!";
	outcomeWText.textAlign = "center";
	outcomeWText.x = 400;
	outcomeWText.y = 200;
	
	stage3.addChild( backgroundContainer, outcomeWText );
	stage3.update();	
}